<template>
   <div class="bg-white pdr pdl pt20">
      <div class="model-cart">
         <div class="model-small model-bg1 float-left">
            <div class="tit">数据字典总数</div>
            <div class="tit-tip">
                  <span  class="tit-tip-tit">累计：</span> <span class="tit-tip-num">{{dict.totalUpdate || 0}}</span>
            </div>
            <div class="tit-tip">
                  <span class="tit-tip-tit">昨日新增:</span> <span class="tit-tip-num">{{dict.lastUpdate || 0}}</span>
            </div>
         </div>
         <div class="model-small model-bg2 float-left">
            <div class="tit">编码规则总数</div>
            <div class="tit-tip">
                  <span  class="tit-tip-tit">累计：</span> <span class="tit-tip-num">{{dir.totalUpdate || 0}}</span>
            </div>
            <div class="tit-tip">
                  <span class="tit-tip-tit">昨日新增:</span> <span class="tit-tip-num">{{dir.lastUpdate || 0}}</span>
            </div>
         </div>
         <div class="model-small model-bg3 float-left">
            <div class="tit">行业概念总数</div>
            <div class="tit-tip">
               <span  class="tit-tip-tit">累计：</span> <span class="tit-tip-num">{{business.totalUpdate || 0}}</span>
            </div>
            <div class="tit-tip">
                  <span class="tit-tip-tit">昨日新增:</span> <span class="tit-tip-num">{{business.lastUpdate || 0}}</span>
            </div>
         </div>
      </div>
      <div class="tab-position-parent">
         <el-button-group>
            <el-button label="basis" :class="['btn-notAction',tabPosition=='basis'?'btn-action':'']" @click="handleClick('basis')">数据字典</el-button>
            <el-button label="associat" :class="['btn-notAction',tabPosition=='associat'?'btn-action':'']" @click="handleClick('associat')">编码规则</el-button>
            <el-button label="change" :class="['btn-notAction',tabPosition=='change'?'btn-action':'']" @click="handleClick('change')">行业概念</el-button>
         </el-button-group>
         <div id="myChart" style="height:275px"></div>
      </div>
      <div class="table-list">
         <el-table v-loading="loading" :data="selectList" border max-height="221px" ref='multipleTable'>
            <el-table-column
               label="数据标准类型"
               align="center"
               key="typeName"
               prop="typeName"
               width="207"
               :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column
               label="数据标准名称"
               align="center"
               key="name"
               prop="name"
                  width="298"
               :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column
               label="所属目录"
               align="changTime"
               key="dirPath"
               prop="dirPath">
               <template slot-scope="scope">
                  <div>
                     <span>{{ scope.row.dirPath }}</span>
                  </div>
               </template>
            </el-table-column>
            <el-table-column
               label="变更类型"
               align="changTime"
               key="operationRemark"
               prop="operationRemark"
               width="199">
            </el-table-column>
            <el-table-column
               label="最近更新时间"
               align="center"
               key="createTime"
               prop="createTime"
               width="160">
            </el-table-column>
         </el-table>
         	<pagination
				v-show="total > 0"
				:total="total"
				small
				:page.sync="queryParams.pageNum"
				:limit.sync="queryParams.pageSize"
				@pagination="getDataLogList"/>
      </div>
   </div>
</template>
<script>
import echarts from 'echarts'
import {setData} from "@/utils/zkComm";
import {dataLogList,dataLogStatistic} from '@/api/dataManagement/system/data'
export default {
   name:"",
   data(){
      return{
         tabPosition:'basis',
         EchartsList:[],
         loading:false,
         selectList:[],
         chartList:'',
         // 字典
         dict:'',
         // 行业概念
         business:'',
         // 编码
         dir:'',
         total:0,
         queryParams:{
            pageNum:1,
            pageSize:20
         }
      }
   },
   created(){
      this.getDataLogList();
      this.getDataLogStatistic();
   },
   mounted(){
   },
   methods:{
      // dataLogStatistic
      // 获取标准概览总数
      getDataLogStatistic(){
         dataLogStatistic().then(res=>{
            if(res.code == 200){
               this.dict=res.data.dict
               this.business=res.data.business
               this.dir=res.data.dir
               this.setDatas(res.data.list)
               if(this.tabPosition == 'basis') {
                  this.variatioHandle(this.chartList.dataTime,this.chartList.size0,'数据字典','#409EFF')
               } else if(this.tabPosition == 'associat') {
                  this.variatioHandle(this.chartList.dataTime,this.chartList.size1,'编码规则','#67C23A')
               } else {
                  this.variatioHandle(this.chartList.dataTime,this.chartList.size2,'行业概念','#E6A23C')
               }
            }
         })
      },
      getDataLogList(){
         dataLogList({...this.queryParams}).then(res=>{
            this.selectList = res.rows;
            this.total = res.total;
            this.$refs.multipleTable.bodyWrapper.scrollTop = 0;
         })
      },
      // 点击tabs
      handleClick(tab){
         this.tabPosition = tab
         this.getDataLogStatistic()
      },
      // 汇总Echart 的数据
      setDatas(list){
            var size0 = [],size1 = [],size2 = [],size3 = [],dataTime=[];
            if(!list) return false;
            function setCharDatas(data){
               if(!data) return;
               for(var i=0;i<data.length;i++){
                  if(Array.isArray(data[i].list)) {
                     dataTime.push(data[i].date)
                     setCharDatas(data[i].list)
                  } else {
                     if(data[i].logType == 0) {
                        size0.push(data[i].size)
                     } else if(data[i].logType == 1){
                        size1.push(data[i].size)
                     } else if(data[i].logType == 2){
                        size2.push(data[i].size)
                     } else {
                        size3.push(data[i].size)
                     }
                  }
               }
               return {size0,size1,size2,size3,dataTime};
            }
            this.chartList = setCharDatas(list);
      },
       //变化量
      variatioHandle(dataTime,dataList,tit,color){
         // setEchart.str
         var data = {
            legend: {
               data: [tit],
               bottom: '10',
            },
            xAxis: {
               data:dataTime,
            },
            grid: {
               left: '0%',
               right: '0%',
               bottom: '11%',
               top:'6%',
               containLabel: true
            },
            series:[
               {
                  name: tit,
                  type: 'line',
                  itemStyle: {
                     color: color
                  },
                   barMaxWidth:'50',
                  // data: setData("totalAccount","",this.EchartsList,this).num ||[120, 132, 101, 134, 90, 230, 210]
                  data: dataList
              }
            ]
         }
         this.initechart(data)
      },
      initechart(obj){
         var chartDom = document.getElementById('myChart');
         var myChart = echarts.init(chartDom);
         var option = {
            legend:obj.legend?obj.legend:null,
            grid:obj.grid?obj.grid:null,
            xAxis: {
               type: 'category',
               data: obj.xAxis.data||['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
               type: 'value',
            },
            series: obj.series
         };
         myChart.clear();
         myChart.setOption(option);
         window.onresize = myChart.resize
      },
   }
}
</script>
<style lang="scss" scoped>
$one:#2A8EF5;
$two:#2CCBED;
$three:#8593F2;


.model-bg1{
   background: $one;
}
.model-bg2{
   background: $two;
}
.model-bg3{
   background: $three;
}

.tit{
    border-bottom:1px solid #FFFFFF;
    padding:10px 0 9px 0;
}
.tit-tip{
    display: flex;
    align-items: center;
    .tit-tip-tit{
        font-size: 16px;;
    }
    .tit-tip-num{
        font-size:22px;
        font-weight:bold;
    }
}
.model-cart{
   overflow: hidden;
   .model-small{
      width:240px;
      height:110px;
      color:#fff;
      padding:0 20px;
      border-radius: 4px;
      margin-right:30px;
   }
}
.tab-position-parent{
   padding-top:15px;
   .btn-notAction{
      border-radius: 0px!important;
   }
   .btn-action{
      background:#1183F8;
      color:#ffffff;
   }
}
.table-list{
   padding:20px 0;
   min-height:272px;
}
</style>
